<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>人脸识别系统</title>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/layui/css/layui.css">
<link rel="stylesheet" href="../static/js/zfes/sweetalert.css">
<style type="text/css">
.div-form-elm{
color:#FFFFFF;height: 50px;margin-top:20px;margin-left:20px;margin-right:20px;background-color: #5A5B5B;border-radius:5px;
}
.label-form-elm{
margin-left: 20px;height: 50px;line-height:50px;font-size: 21px;text-align: right;float: left;
}
.input-form-elm{
width:180px;margin-left: auto;height: 50px;font-size: 21px;background-color: #5A5B5B;color:#FFFFFF;border: thin;
}
.btn-form-elm{
color:#FFFFFF;height: 43px;margin-top:3px;width:125px;background-color: #3F51B5;border-radius:5px;text-align: center;line-height: 30px;font-size: 25px
}
</style>

</head>
<body>
<div class="layui-row">
    <div class="layui-col-xs7 layui-col-md-offset3">
        <div style="width: 1024px;height: 80px;background-color: #383939">
            <div style="margin-left: 100px;height: 80px;text-align:left;line-height:80px;font-size: 40px;color: #E51C23">
                人脸识别系统
            </div>
        </div>
        <div style="width: 1024px;height: 80px;background-color: #101010">
            <div style="display:inline;margin-left: 20px;height: 80px;text-align:left;line-height:80px;font-size: 36px;color: #E51C23">
                图像识别
            </div>
        </div>

        <div style="width: 1024px;height:600px;background-color: #383939">

            <a href="#">
                <div id="imageDiv" class="layui-col-xs8"
                     style="width: 600px;height: 550px;
                     background-image :url(../static/images/zhanwei.jpg); 
                      background-repeat: no-repeat;
                      background-position: center center;
                      background-size: cover; 
					background-size: contain;">
                </div>
            </a>

            <div class="layui-col-xs4" style="height: 824px;margin-left: 0px" id="registerDiv">
                <div style="color: #FFFFFF;font-size: 30px;margin-left: 50px;margin-top: 29px;text-align: left">
                  		  身份信息
                </div>

                <form class="form-horizontal form" role="from" id="acq_form"  enctype="multipart/form-data">

                    <div  class="div-form-elm">
                        <label class="label-form-elm">姓名：</label>
                        <input   class="input-form-elm"  type="text" id="name" name="name" autocomplete="off">
                    </div>
                    
                      <div  class="div-form-elm">
                        <label class="label-form-elm">电话：</label>
                        <input class="input-form-elm" type="text" id="phone"  name="phone" autocomplete="off">
                    </div>
                      <div  class="div-form-elm">
                        <label class="label-form-elm">邮箱：</label>
                        <input  class="input-form-elm"  type="text"  id="email" name="email">
                    </div>

					<div  class="div-form-elm">
                        <label class="label-form-elm">性别：</label>
                        <select name="gender"   id="gender"  class="input-form-elm" >
                        <option value="0" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;男&nbsp; &nbsp;</option>
                        <option  value="1" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;女&nbsp; &nbsp;</option>
                        <option  value="-1" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;未知&nbsp; &nbsp;</option>
                        </select>
                    </div>

  					<div  class="div-form-elm">
                        <label class="label-form-elm">年龄：</label>
                        <input  class="input-form-elm"   id="age" type="number" name="age">
                    </div>
                    
                    <div  class="div-form-elm">
                        <label class="label-form-elm">相似度：</label>
                        <input  class="input-form-elm"  id="similarScore" type="text" name="similarScore">
                    </div>
                    
                      <input type="file" name="file" id="chooseFile" onchange="chooseFileChange()" style="display:none;"/>
                     <input type="hidden" name="facePic" id="facePic" />
                  
                </form>

            </div>


        </div>


    </div>

</div>
    <script src="../static/jquery/jquery.2.2.4.min.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/vue.min.js"></script>
    
    <script src="../static/js/zfes/zfes.util.js"></script>
    <script src="../static/js/zfes/sweetalert.min.js"></script>
    <script src="../static/js/zfes/zfes.core.js"></script>
    <script src="../static/js/zfes/zfes.alert.swal.js"></script>
    <script src="../static/js/zfes/zfes.ajax.js"></script>

<script>
layui.use('upload', function(){
	  var $ = layui.jquery,
	  upload = layui.upload;
	  
	  //普通图片上传
	  var uploadInst = upload.render({
	     elem: '#chooseFile',
	    url: '/reco/face/binaryImg',
	    done: function(res){
	    	document.getElementById("acq_form").reset();
	    	if(res.statusCode!=200){
	    		alertSwal.warningText(res.message);
	    		return ;
	    	}
	    	if(res.data.resList.length==0){
	    		alertSwal.warningText("未查询到数据");
	    		return ;
	    	}

	    	var userFaceInfo=res.data.resList[0].userFaceInfo;
	    	var similarScore=res.data.resList[0].similarScore;
	    	$("#name").val(userFaceInfo.name);
	    	$("#phone").val(userFaceInfo.phone);
	    	$("#email").val(userFaceInfo.email);
	    	$("#age").val(userFaceInfo.age);
	    	$("#similarScore").val(similarScore);
	    	alertSwal.successText("图像匹配成功");
	      if(res.statusCode ==200){
	    	  var fileUrl=res.data.fileUrl;
	    	  $("#facePic").val(fileUrl);
	       // return layer.msg('上传成功');
	      }else{
	    	  return layer.msg('上传失败');
	      }
	    },
	    error: function(){
	    	 return layer.msg('上传失败');
	    }
	  });
	});
   $("#imageDiv").click(function () {
        $("#chooseFile").click();
    });  /* */

     function chooseFileChange() {
        $("#imageDiv").css("background-image", 'url(' + URL.createObjectURL($("#chooseFile")[0].files[0]) + ')');
    }/* */

 /*    $('#submitInp').click(function () {
    	var url = "/admin/face/createUserFaceInfo"
	     zfesAjax.ajaxTodo(url,zfesUtil.formToJson($('#acq_form')),function (data) {
	             alertSwal.successText(data.message);
	             setTimeout(function () {
                     window.location.reload();
                 }, 2000);
	             document.getElementById("acq_form").reset(); 
	             $("#imageDiv").css("background-image", '/static/images/zhanwei.jpg');
	             
	      });


    }); */


</script>
</body>
</html>